<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-form :inline="true" :model="formData" class="demo-form-inline" >
      <el-form-item label="对结算编号">
        <el-input v-model="formData.number" placeholder="请输入结算单编号"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="formData.customerName" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="租赁订单编号">
        <el-input v-model="formData.customerName" placeholder="请输入租赁订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Search">查询</el-button>
        <el-button  @click="ResetList">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <el-button v-hasPermi="['module:statement:add']" style="margin-bottom: 10px" type="success" icon="el-icon-plus"  @click="openDialog">新增</el-button>
      <!--    租金对结算单列表-->
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="contractTemplate"
          label="合同模板"
          width="120">
        </el-table-column>
        <el-table-column
          prop="sponsorName"
          label="发起人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="salesmanName"
          label="业务员"
          width="120">
        </el-table-column>
        <el-table-column
          prop="applyDate"
          label="申请日期">
        </el-table-column>
        <el-table-column
          prop="number"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户名称">
        </el-table-column>
        <el-table-column
          prop="businessCompany"
          label="业务所属公司">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单编号">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="projectName"-->
<!--          label="项目名称">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="projectSource"-->
<!--          label="项目信息来源来源">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="startDate"-->
<!--          label="起租日期">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="endDate"-->
<!--          label="到租日期">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="totalDailyRent"
          label="日租金合计">
        </el-table-column>
        <el-table-column
          prop="rentReceivable"
          label="应收租金">
        </el-table-column>
        <el-table-column
          prop="rentAllowanceAmount"
          label="租金折让金额">
        </el-table-column>
        <el-table-column
          prop="rentAllowanceDescription"
          label="租金折让说明">
        </el-table-column>
        <el-table-column
          prop="relationApprovalForm"
          label="关联特殊事项审批单">
        </el-table-column>
        <el-table-column
          prop="totalOtherExpenses"
          label="其他费用总额">
        </el-table-column>
        <el-table-column
          prop="otherExpensesList"
          label="收取客户其他费用明细">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="200px"
              trigger="click">
              <el-table :data="scope.row.otherExpensesList">
                <el-table-column align="center" type="index" label="序号"></el-table-column>
                <el-table-column align="center" width="100" property="expenseCategory" label="费用类别">
                  <template slot-scope="scope">
                    <span v-if="scope.row.expenseCategory==0">其他</span>
                    <span v-if="scope.row.expenseCategory==1">物流费</span>
                    <span v-if="scope.row.expenseCategory==2">维修费</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="80" property="unit" label="单位">
                  <template slot-scope="scope">
                    <span v-if="scope.row.unit==0">其他</span>
                    <span v-if="scope.row.unit==1">台</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="130" property="quantity" label="数量"></el-table-column>
                <el-table-column align="center" width="130" property="totalAmount" label="类别总金额"></el-table-column>
              </el-table>
              <el-button type="text" slot="reference">查看全部</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="rentPaid"
          label="实收租金">
        </el-table-column>
        <el-table-column
          prop="depositPaid"
          label="实收押金">
        </el-table-column>
        <el-table-column
          prop="refundableDeposit"
          label="应退押金">
        </el-table-column>
        <el-table-column
          prop="accountStatementAttachments"
          label="对账单附件">
        </el-table-column>
        <el-table-column
          prop="accountNumber"
          label="退款账号">
        </el-table-column>
        <el-table-column
          prop="accountAttachments"
          label="账户附件信息">

        </el-table-column>
        <el-table-column
          prop="totalDeductibleExpenses"
          label="应扣费用总额">
        </el-table-column>
        <el-table-column
          prop="deductibleExpensesList"
          label="项目应扣费用对象">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="200px"
              trigger="click">
              <el-table :data="scope.row.deductibleExpensesList">
                <el-table-column align="center" type="index" label="序号"></el-table-column>
                <el-table-column align="center" width="100" property="expenseCategory" label="费用类别">
                  <template slot-scope="scope">
                    <span v-if="scope.row.expenseCategory==0">其他</span>
                    <span v-if="scope.row.expenseCategory==1">物流费</span>
                    <span v-if="scope.row.expenseCategory==2">维修费</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="80" property="unit" label="单位">
                  <template slot-scope="scope">
                    <span v-if="scope.row.unit==0">其他</span>
                    <span v-if="scope.row.unit==1">台</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="130" property="amount" label="金额"></el-table-column>
                <el-table-column align="center" width="130" property="hasPaid" label="否已支付"></el-table-column>
                <el-table-column align="center" width="130" property="payer" label="支付方"></el-table-column>
              </el-table>
              <el-button type="text" slot="reference">查看全部</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalLogisticsExpenses"
          label="物流项目总额">
        </el-table-column>
        <el-table-column
          prop="logisticsExpensesList"
          label="物流及辅料费用对象">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="200px"
              trigger="click">
              <el-table :data="scope.row.logisticsExpensesList">
                <el-table-column align="center" type="index" label="序号"></el-table-column>
                <el-table-column width="100" property="expenseCategory" label="费用类别">
                  <template slot-scope="scope">
                    <span v-if="scope.row.expenseCategory==0">其他</span>
                    <span v-if="scope.row.expenseCategory==1">物流费</span>
                    <span v-if="scope.row.expenseCategory==2">维修费</span>
                  </template>
                </el-table-column>
                <el-table-column width="100" property="quantity" label="数量"></el-table-column>
                <el-table-column width="100" property="amount" label="金额"></el-table-column>
                <el-table-column width="80" property="model" label="型号"></el-table-column>
                <el-table-column width="100" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="payer" label="支付方"></el-table-column>

              </el-table>
              <el-button type="text" slot="reference">查看全部</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalMaintenanceCost"
          label="维修项目总额">
        </el-table-column>
        <el-table-column
          prop="maintenanceCostList"
          label="维修、配件费用对象">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="200px"
              trigger="click">
              <el-table :data="scope.row.maintenanceCostList">
                <el-table-column align="center" width="130" property="expenseCategory" label="费用类别">
                  <template slot-scope="scope">
                    <span v-if="scope.row.expenseCategory==0">其他</span>
                    <span v-if="scope.row.expenseCategory==1">物流费</span>
                    <span v-if="scope.row.expenseCategory==2">维修费</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="130" property="unit" label="单位">
                  <template slot-scope="scope">
                    <span v-if="scope.row.unit==0">其他</span>
                    <span v-if="scope.row.unit==1">台</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="100" property="remark" label="备注"></el-table-column>
                <el-table-column align="center" width="130" property="totalAmount" label="金额"></el-table-column>

              </el-table>
              <el-button type="text" slot="reference">查看全部</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="estimateProjectProfit"
          label="项目毛利">

        </el-table-column>
        <el-table-column
          prop="signRenName"
          label="签订人名称">
        </el-table-column>
        <el-table-column
          prop="collaboratorName"
          label="协同人名称">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button  v-hasPermi="['module:statement:edit']" type="text" @click="editFn(scope.row)" >修改</el-button>
            <el-button  v-hasPermi="['module:statement:remove']" type="text" @click="delFn(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNum"
        :page-sizes="[10, 12, 30, 50]"
        :page-size="formData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--    弹框组件-->
    <el-dialog
      :title="formData.id?'修改结算单':'新增结算单'"
      :visible.sync="isShow"
      @close="DialogClose"
      width="50%"
    >
      <el-form :model="formData" :rules="formRules" ref="form" inline label-width="130px">
        <el-form-item label="订单编号" prop="orderNo"><el-input v-model="formData.orderNo">

          <template slot="append">
            <el-button style="width:60px" type="primary" @click="OpenOrderList">
              选择
            </el-button>
          </template>>
        </el-input></el-form-item>
        <el-form-item label="合同模板" prop="contractTemplate">
          <el-select v-model="formData.contractTemplate" placeholder="合同模板">
            <el-option
              v-for="item in contractTemplateOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起人" prop="sponsorName"><el-input readonly v-model="formData.sponsorName"></el-input></el-form-item>
        <el-form-item label="业务员" prop="salesmanName"><el-input readonly v-model="formData.salesmanName"></el-input></el-form-item>
        <el-form-item label="签订人名" prop="signRenName"><el-input readonly v-model="formData.signRenName"></el-input></el-form-item>
        <el-form-item label="协同人" prop="collaboratorName"><el-input readonly v-model="formData.collaboratorName"></el-input></el-form-item>
        <el-form-item label="申请日期" prop="applyDate">
          <el-date-picker
            v-model="formData.applyDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="对账单编号" prop="number"><el-input readonly v-model="formData.number"></el-input></el-form-item>
        <el-form-item label="客户名称" prop="customerName"><el-input readonly v-model="formData.customerName"></el-input></el-form-item>
        <el-form-item label="业务所属公司" prop="businessCompany"><el-input readonly v-model="formData.businessCompany"></el-input></el-form-item>

        <el-form-item label="项目区域" prop="projectArea">
          <el-select v-model="formData.projectArea" placeholder="所属地区">
            <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"

            ></el-option>
          </el-select></el-form-item>
<!--        <el-form-item label="起租日期" prop="startDate">-->
<!--          <el-date-picker-->
<!--            v-model="formData.startDate"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="到租日期" prop="endDate">-->
<!--          <el-date-picker-->
<!--            v-model="formData.endDate"-->
<!--            @blur="DayFn"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="使用天数" prop="usedDays"><el-input v-model="formData.usedDays"></el-input></el-form-item>-->
        <el-form-item label="日租金合计" prop="totalDailyRent"><el-input readonly v-model="formData.totalDailyRent"></el-input></el-form-item>
        <el-form-item label="应收租金" prop="rentReceivable"><el-input  readonly v-model="formData.rentReceivable"></el-input></el-form-item>
        <el-form-item label="租金折让" prop="rentAllowanceAmount"><el-input @focus="confirmFn" @blur="calculateFn" v-model="formData.rentAllowanceAmount"></el-input></el-form-item>
        <br>
        <el-form-item label="折让说明" prop="rentAllowanceDescription"><el-input style="width: 300px;" type="textarea" v-model="formData.rentAllowanceDescription"></el-input></el-form-item>
        <br>
        <!--          租赁机器费用明细-->
        <el-form-item label="租赁费用"><el-input readonly v-model="this.totalMachineExpense"></el-input></el-form-item>
        <el-form-item label="租赁机器费用明细">
          <!--          <template slot-scope="scope">-->
          <div style="margin-left: 40px">
          <el-table :data="machineExpenseList"  >
            <el-table-column  label="序号"  type="index"></el-table-column>
            <el-table-column label="产品名称" prop="productName"></el-table-column>
            <el-table-column label="型号" prop="model"></el-table-column>
            <el-table-column label="机器编号" prop="machineNo"></el-table-column>
            <el-table-column label="出库时间" prop="outtime"></el-table-column>
            <el-table-column label="入库时间" prop="retime"></el-table-column>
            <el-table-column label="总天数" prop="allTime"></el-table-column>
            <el-table-column label="日租金" prop="dailyTotalRent"></el-table-column>
            <el-table-column label="金额" prop="rent"></el-table-column>
          </el-table>
          </div>
          <!--          </template>-->
        </el-form-item>
        <el-form-item label="对账单附件" prop="accountStatementAttachments">
          <image-upload v-model="formData.accountStatementAttachments"/>
        </el-form-item>
        <el-form-item label="账户信息附件" prop="accountNumber">
          <image-upload v-model="formData.accountNumber"/></el-form-item>
        <br>
        <el-form-item label="特殊事项审批单" prop="relationApprovalForm"><el-input v-model="formData.relationApprovalForm"></el-input></el-form-item>
        <br>
        <el-form-item label="其他费用总额" prop="totalOtherExpenses"><el-input v-model="formData.totalOtherExpenses"></el-input></el-form-item>
        <el-form-item label="收取客户其他费用" prop="otherExpensesList">
<!--          <el-button size="mini" type="success" @click="openMOreFn(1)">添加</el-button>-->
          <div style="margin-top: 50px; background-color: #f1f3f4">
            <el-table :data="formData.otherExpensesList">
              <el-table-column align="center" type="index" label="序号"></el-table-column>
              <el-table-column align="center" width="100" property="expenseCategory" label="费用类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.expenseCategory==0">其他</span>
                  <span v-if="scope.row.expenseCategory==1">物流费</span>
                  <span v-if="scope.row.expenseCategory==2">维修费</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80" property="unit" label="单位">
                <template slot-scope="scope">
                  <span v-if="scope.row.unit==0">其他</span>
                  <span v-if="scope.row.unit==1">台</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="130" property="quantity" label="数量"></el-table-column>
              <el-table-column align="center" width="130" property="totalAmount" label="类别总金额"></el-table-column>
<!--              <el-table-column align="center" width="100" label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button type="danger" size="mini" @click="delHand(scope.$index,1)">删除</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </el-form-item >
        <el-form-item label="应扣费用总额" prop="totalDeductibleExpenses"><el-input v-model="formData.totalDeductibleExpenses"></el-input></el-form-item>
        <el-form-item label="项目应扣费用对象" prop="deductibleExpensesList">
<!--          <el-button size="mini" style="margin-left: 50px" type="success" @click="openMOreFn(2)">添加</el-button>-->
          <div style="margin-top: 10px;background-color: #f1f3f4 ;margin-left: 50px">
            <el-table :data="formData.deductibleExpensesList">
              <el-table-column align="center" type="index" label="序号"></el-table-column>
              <el-table-column align="center" width="100" property="expenseCategory" label="费用类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.expenseCategory==0">其他</span>
                  <span v-if="scope.row.expenseCategory==1">物流费</span>
                  <span v-if="scope.row.expenseCategory==2">维修费</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80" property="unit" label="单位">
                <template slot-scope="scope">
                  <span v-if="scope.row.unit==0">其他</span>
                  <span v-if="scope.row.unit==1">台</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="130" property="amount" label="金额"></el-table-column>
              <el-table-column align="center" width="130" property="hasPaid" label="否已支付"></el-table-column>
              <el-table-column align="center" width="130" property="payer" label="支付方"></el-table-column>
<!--              <el-table-column align="center" width="100" label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button type="danger"  size="mini" @click="delHand(scope.$index,2)">删除</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="物流费用总额" prop="totalLogisticsExpenses"><el-input v-model="formData.totalLogisticsExpenses"></el-input></el-form-item>
        <el-form-item label="物流辅料费用" prop="logisticsExpensesList">
<!--          <el-button size="mini" style="margin-left: 50px" type="success" @click="openMOreFn(3)">添加</el-button>-->
          <div style="margin-top: 10px;margin-left: 50px;">
            <el-table :data="formData.logisticsExpensesList">
              <el-table-column align="center" type="index" label="序号"></el-table-column>
              <el-table-column width="100" property="expenseCategory" label="费用类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.expenseCategory==0">其他</span>
                  <span v-if="scope.row.expenseCategory==1">物流费</span>
                  <span v-if="scope.row.expenseCategory==2">维修费</span>
                </template>
              </el-table-column>
              <el-table-column width="100" property="quantity" label="数量"></el-table-column>
              <el-table-column width="100" property="amount" label="金额"></el-table-column>
              <el-table-column width="80" property="model" label="型号"></el-table-column>
              <el-table-column width="100" property="date" label="日期"></el-table-column>
              <el-table-column width="100" property="payer" label="支付方"></el-table-column>
<!--              <el-table-column align="center" width="100" label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button type="danger" size="mini" @click="delHand(scope.$index,3)">删除</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="维修费用总额" prop="totalMaintenanceCost"><el-input v-model="formData.totalMaintenanceCost"></el-input></el-form-item>
        <el-form-item label="维修配件费用对象" prop="maintenanceCostList">
<!--          <el-button size="mini" type="success" @click="openMOreFn(4)">添加</el-button>-->
          <div style="margin-top: 50px;background-color: #f1f3f4">
            <el-table :data="formData.maintenanceCostList">
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column align="center" width="130" property="expenseCategory" label="费用类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.expenseCategory==0">其他</span>
                  <span v-if="scope.row.expenseCategory==1">物流费</span>
                  <span v-if="scope.row.expenseCategory==2">维修费</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="130" property="unit" label="单位">
                <template slot-scope="scope">
                  <span v-if="scope.row.unit==0">其他</span>
                  <span v-if="scope.row.unit==1">台</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="100" property="remark" label="备注"></el-table-column>
              <el-table-column align="center" width="130" property="totalAmount" label="金额"></el-table-column>
<!--              <el-table-column align="center" width="100" label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button type="danger" size="mini" @click="delHand(scope.$index,4)">删除</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="实收租金" prop="rentPaid"><el-input v-model="formData.rentPaid"></el-input></el-form-item>
        <el-form-item label="实收押金" prop="depositPaid"><el-input v-model="formData.depositPaid"></el-input></el-form-item>
        <el-form-item label="预估毛利润" prop="estimateProjectProfit"><el-input v-model="formData.estimateProjectProfit"></el-input></el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="isShow = false">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </span>
    </el-dialog>
    <!-- 租赁订单选择框-->
    <el-dialog
      title="请选对账单"
      :visible.sync="orderListIsShow"
      width="45%" @close="orderClose">
      <el-form :model="orderFrom" inline  label-width="100px" >
        <el-form-item label="客户姓名" prop="customerName">
          <el-input style="width: 240px" v-model="orderFrom.customerName" placeholder="请选择客户名" >
            <template slot="append">
              <el-button type="primary" @click="openProject">
                选择客户
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input style="width: 240px" v-model="orderFrom.projectName" placeholder="请输入项目名称" >
            <template slot="append">
              <el-button type="primary" @click="openProject">
                选择项目
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="租赁订单状态" prop="orderStatus">  <el-select v-model="orderFrom.orderStatus" placeholder="选择状态">
          <el-option
            v-for="item in OrderOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select></el-form-item>
      </el-form>
      <el-button style="margin-bottom: 15px;margin-left: 100px;" size="small" type="success" @click="SearchOrderNo">查询</el-button>
      <el-table :data="OrderList" tooltip-effect="dark" style="width: 100%">
        <el-table-column
          label="订单编号"
          prop="orderNo"
          width="120">
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="salesmanName"
          label="业务员"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="checked(scope.row.orderNo)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
<!--    项目费用-->
    <el-dialog title="添加其它费用" :visible.sync="otherExpensesShow" width="30%" @close="close">
      <el-form :model="otherExpensesForm" inline label-width="100px" >
        <div v-if="figure===1">
          <el-form-item label="费用类别" prop="expenseCategory"> <el-select v-model="otherExpensesForm.expenseCategory" placeholder="费用类别">
            <el-option
              v-for="item in expenseOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select></el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-select v-model="otherExpensesForm.unit" placeholder="单位">
              <el-option
                v-for="item in expenseUnitOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="quantity"> <el-input v-model="otherExpensesForm.quantity" placeholder="请输入数量"></el-input></el-form-item>
          <el-form-item label="类别总金额" prop="totalAmount"> <el-input v-model="otherExpensesForm.totalAmount" placeholder="请输入金额"></el-input></el-form-item>

        </div>
        <div v-if="figure===2">
          <el-form-item label="费用类别" prop="expenseCategory">
            <el-select v-model="otherExpensesForm.expenseCategory" placeholder="费用类别">
              <el-option
                v-for="item in expenseOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-select v-model="otherExpensesForm.unit" placeholder="单位">
              <el-option
                v-for="item in expenseUnitOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额" prop="amount"> <el-input v-model="otherExpensesForm.amount" placeholder="请输入金额"></el-input></el-form-item>
          <el-form-item label="是否已支付" prop="hasPaid"> <el-input v-model="otherExpensesForm.hasPaid" placeholder="请输入金额"></el-input></el-form-item>
          <el-form-item label="支付方" prop="payer"> <el-input v-model="otherExpensesForm.payer" placeholder="支付方"></el-input></el-form-item>
        </div>
        <div v-if="figure===3">
          <el-form-item label="费用类别" prop="expenseCategory">
            <el-select v-model="otherExpensesForm.expenseCategory" placeholder="费用类别">
              <el-option
                v-for="item in expenseOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="quantity"> <el-input v-model="otherExpensesForm.quantity" placeholder="请输入数量"></el-input></el-form-item>
          <el-form-item label="金额" prop="amount"> <el-input v-model="otherExpensesForm.amount" placeholder="请输入金额"></el-input></el-form-item>
          <el-form-item label="型号" prop="model"> <el-input v-model="otherExpensesForm.model" placeholder="型号"></el-input></el-form-item>
          <el-form-item label="日期" prop="expenseDate">
            <el-date-picker
              v-model="otherExpensesForm.expenseDate"
              type="date"
              @change="change"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="支付方" prop="payer"> <el-input v-model="otherExpensesForm.payer" placeholder="支付方"></el-input></el-form-item>
        </div>
        <div v-if="figure===4">
          <el-form-item label="费用类别" prop="expenseCategory">
            <el-select v-model="otherExpensesForm.expenseCategory" placeholder="费用类别">
              <el-option
                v-for="item in expenseOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-select v-model="otherExpensesForm.unit" placeholder="单位">
              <el-option
                v-for="item in expenseUnitOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark"> <el-input v-model="otherExpensesForm.remark" placeholder="备注"></el-input></el-form-item>

          <el-form-item label="金额" prop="totalAmount"> <el-input v-model="otherExpensesForm.totalAmount" placeholder="请输入金额"></el-input></el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="otherExpensesShow=false">取 消</el-button>
        <el-button type="primary" @click="handOk">确 定</el-button>
      </span>
    </el-dialog>
    <project-list ref="project" @showProject="showProject"></project-list>

  </div>
</template>
<script>
import {getFinalStatementListApi, getFinalStatementInfoApi, addFinalStatementApi, editFinalStatementApi,delFinalStatementApi} from '@/api/module/finalstatement'
import {listOrder, } from '@/api/module/order'
import {delStatementApi, getStatementListApi} from '@/api/module/statemente'
import {getDicts} from "@/api/system/dict/data";
import { provinceNameList } from '@/api/module/region';
import ProjectList from '@/views/module/order/project'
import {formatDate} from "@/utils";
import {getMachineListExpenseApi} from '@/api/module/statemente'



export default {
  name:'FinalStatement',
  components:{ProjectList},
  data(){
    return {
      formData:{
        contractTemplate:null,// 合同模板
        sponsor	:null,//发起人
        sponsorName:null,//e		发起人名称
        salesman		:null,//	业务员
        salesmanName:null,//		业务员名称
        applyDate	:null,//	申请日期1
        number:null,//		编号1
        customerId	:null,//客户
        customerName:null,//	客户名称
        businessCompany:null,//		业务所属公司
        orderId		:null,//	订单id
        orderNo		:null,//订单编号
        projectArea:null,//项目地址
        startDate	:null,//	起租日期1
        endDate	:null,//	到租日期1
        usedDays:null,//使用天数1
        totalDailyRent:null,//日租金合计
        rentReceivable:null,//应收租金
        rentAllowanceAmount:null,//租金折让金额
        rentAllowanceDescription:null,//折让说明
        relationApprovalForm:null,//关联特殊事项审批单
        totalOtherExpenses	:null,//其他费用总额
        rentPaid:null,// 实收租金
        depositPaid	:null,// 实收押金
        refundableDeposit:null,// 应退押金
        accountStatementAttachments:null,//		对账单附件
        accountNumber:null,//		帐户信息附件
        totalDeductibleExpenses:null,// 	应扣费用总额
        totalLogisticsExpenses:null,// 	物流费用总额
        totalMaintenanceCost:null,//维修费用总额
        estimateProjectProfit:null,//预估项目毛利
        signRenId		:null,//	签订人id
        signRenName	:null,//	签订人名称
        collaborator:null,//			协同人id
        collaboratorName	:null,//	协同人名称
        otherExpensesList:[],//		收取客户其他费用
        deductibleExpensesList:[],//项目应扣费用对象
        logisticsExpensesList	:[],//	物流及辅料费用对象
        maintenanceCostList	:[],//[维修、配件费用对象
        pageSize:10,
        pageNum:1
      },
      OldNumber:null,//储存旧值
      total:null,
      formRules:{
        applyDate:[{required:'true',message:'请选择申请日期',trigger:'blur'}],
        rentPaid:[{required:'true',message:'请输入实收租金',trigger:'blur'}]
      },
      list:[],
      isShow:false,//否打开弹框
      orderListIsShow:false,//租赁订单框
      OrderList:[],//租赁订单列表
      orderFrom:{
        projectName:'',
        customerName:'',//客户名称
        orderStatus:'5'
      },
      otherExpensesShow:false,
      figure:null,
      otherExpensesForm:{ },//其他费用
      ProjectCompanyOptions:[],//项目所属公司
      //订单状态
      OrderOptions:[],
      contractTemplateOptions:[],
      projectSourceOptions:null,
      regionOptions:[],//地区选择

      machineExpenseList:[],//机器租金
      totalMachineExpense:0,
    }
  },
  watch:{
   // 'formData.rentAllowanceAmount':{
   //   handler(oldVal,newVal){
   //     console.log(oldVal,newVal)
   //     let number=Number(this.formData.rentReceivable)+Number(oldVal)-Number(newVal)
   //     this.formData.rentReceivable=number
   //   },
   //   immediate:true
   // }


  },
  created(){
    this.getList()
    this.getProjectSourceOptions()//获取项目信息来源
    this.getAreaList()//项目地址可选项
    this.getProjectCompony()//
    this.getContractTemplateOptions()
    this.getOrderTypeOptions()
    this.getExpenseOptions()//费用类别
    this.getExpenseUnitOptions()
  },
  methods:{
    // 获取租赁对账单列表
    async getList(){
      let res=await getFinalStatementListApi(this.formData)
      console.log(res)
      res.rows.forEach(item=>{
        item.businessCompany=this.getValue(this.ProjectCompanyOptions,item.businessCompany)
      })
      this.list=res.rows
      this.total=res.total
    },
    //  获取合同模板
    async getContractTemplateOptions(){
      let res= await getDicts('biz_contract_template')
      this.contractTemplateOptions=res.data
    },
    async getOrderTypeOptions(){
      let res=await getDicts('order_type')
      this.OrderOptions=res.data
    },
    //  获取费用类别
    async getExpenseOptions(){
      let res=await getDicts('expense_type')
      this.expenseOptions=res.data
    },
    //  获取项目单位
    async getExpenseUnitOptions(){
      let res=await getDicts('expense_type_unit')
      this.expenseUnitOptions=res.data
    },
    //  搜索按钮
    Search(){
      this.getList()
    },
    //  重置按钮
    ResetList(){
      this.formData={}//清空表单
      this.getList()
    },

    handleSizeChange(val) {
      this.formData.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formData.pageNum=val
      this.getList()
    },
    //  弹框打开
    openDialog(){
      this.isShow=true
    },
    //费用列表弹框打开
    openMOreFn(val){
      this.figure=val
      this.otherExpensesShow=true
    },
    close(){
      this.otherExpensesForm={}
    },
    change(value){

      console.log(this.formatDate(value))
      this.otherExpensesForm.date=this.formatDate(value)
    },
    //格式转换
    formatDate (d) {
      var date = new Date(d);
      var YY = date.getFullYear() + '-';
      var MM =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();

      return YY + MM + DD
    },
    DayFn(){
      this.formData.usedDays= this.getDayBetween(this.formatDate(this.formData.startDate),this.formatDate(this.formData.endDate))
    },
    //计算天数
    getDayBetween(start,end){
      var startDate=Date.parse(start)
      var endDate=Date.parse(end)
      if(startDate>endDate){
        return this.$message('请重新确认日期')
      }
      if(startDate==endDate){
        return 1
      }
      var days=(endDate-startDate)/(1*24*60*60*1000)
      return days
    },
    //费用事件明细
    handOk(){
      if(this.figure===1){
        this.formData.otherExpensesList.push(this.otherExpensesForm)
        this.formData.totalOtherExpenses=0
        this.formData.otherExpensesList.forEach(item=>{
          this.formData.totalOtherExpenses+=Number(item.totalAmount)

        })

      }
      if(this.figure===2){
        this.formData.deductibleExpensesList.push(this.otherExpensesForm)
        this.formData.totalDeductibleExpenses=0
        this.formData.deductibleExpensesList.forEach(item=>{
          this.formData.totalDeductibleExpenses+=Number(item.amount)
        })
      }
      if(this.figure===3){
        this.formData.logisticsExpensesList.push(this.otherExpensesForm)
        this.formData.totalLogisticsExpenses=0
        this.formData.logisticsExpensesList.forEach(item=>{
          this.formData.totalLogisticsExpenses+=Number(item.amount)
        })
      }
      if(this.figure===4){
        this.formData.maintenanceCostList.push(this.otherExpensesForm)
        this.formData.totalMaintenanceCost=0
        this.formData.maintenanceCostList.forEach(item=>{
          this.formData.totalMaintenanceCost+=Number(item.totalAmount)
        })
      }
      this.otherExpensesShow=false

    },
    //租金折让输入框
    confirmFn(){
      console.log(this.formData.rentAllowanceAmount)
      this.OldNumber=this.formData.rentAllowanceAmount
    },
    calculateFn(){
      console.log('11')
      this.formData.rentReceivable=Number(this.formData.rentReceivable)+Number(this.OldNumber)-Number(this.formData.rentAllowanceAmount)
    },
    //删除明细
    async delHand(index,val){
      if(val===1){
        await this.$confirm('是否确认删除')
        this.formData.otherExpensesList.splice(index,1)
      }
      if(val===2){
        await this.$confirm('是否确认删除')
        this.formData.deductibleExpensesList.splice(index,1)
      }
      if(val===3){
        await this.$confirm('是否确认删除')
        this.formData.logisticsExpensesList.splice(index,1)
      }
      if(val===4){
        await this.$confirm('是否确认删除')
        this.formData.maintenanceCostList.splice(index,1)
      }
    },
   async DialogClose(){
      this.OrderList=[]
      this.formData={
        contractTemplate:null,// 合同模板
        sponsor	:null,//发起人
        sponsorName:null,//e		发起人名称
        salesman		:null,//	业务员
        salesmanName:null,//		业务员名称
        applyDate	:null,//	申请日期1
        number:null,//		编号1
        customerId	:null,//客户
        customerName:null,//	客户名称
        businessCompany:null,//		业务所属公司
        orderId		:null,//	订单id
        orderNo		:null,//订单编号
        projectName:null,//		项目名称
        projectSource:null,//		项目信息来源
        startDate	:null,//	起租日期1
        endDate	:null,//	到租日期1
        usedDays:null,//使用天数1
        totalDailyRent:null,//日租金合计
        rentReceivable:null,//应收租金
        rentAllowanceAmount:null,//租金折让金额
        rentAllowanceDescription:null,//折让说明
        relationApprovalForm:null,//关联特殊事项审批单
        totalOtherExpenses	:null,//其他费用总额
        rentPaid:null,// 实收租金
        depositPaid	:null,// 实收押金
        refundableDeposit:null,// 应退押金
        accountStatementAttachments:null,//		对账单附件
        accountNumber:null,//		帐户信息附件
        totalDeductibleExpenses:null,// 	应扣费用总额
        totalLogisticsExpenses:null,// 	物流费用总额
        totalMaintenanceCost:null,//维修费用总额
        estimateProjectProfit:null,//预估项目毛利
        signRenId		:null,//	签订人id
        signRenName	:null,//	签订人名称
        collaborator:null,//			协同人id
        collaboratorName	:null,//	协同人名称
        otherExpensesList:null,//		收取客户其他费用
        deductibleExpensesList:null,//项目应扣费用对象
        logisticsExpensesList	:null,//	物流及辅料费用对象
        maintenanceCostList		:null,//[维修、配件费用对象
      }
     this.totalMachineExpense=0
     this.machineExpenseList=[]
     this.OldNumber=0
      await  this.getList()
    },
//  租赁订单选择项目+客户
    //打开项目弹框
    openProject(){
      this.$refs.project.isShow=true
    },
    showProject(data){
      console.log(data)
      this.orderFrom.projectName=data.projectName
      this.orderFrom.customerName=data.customerName
    },
    // 关闭
    orderClose(){
      this.orderFrom={
        projectName:'',
        customerName:'',//客户名称
        orderStatus:'5'
      }
    },
    //弹框打开
    async OpenOrderList(){
      this.orderListIsShow=true
      let res= await listOrder(this.orderFrom)
      this.OrderList=res.rows//首次打开默认筛选所有未出库状态
      this.formData.number= this.setOrderNo()//生成从对账单编号


    },
    //获取地区选择
    getAreaList() {
      provinceNameList().then(res => {
        this.regionOptions = res.rows;
        let arr = JSON.parse(JSON.stringify(res.rows)) //深拷贝
        /*    arr.forEach(item => {
              item.children.forEach(cItem => delete cItem.children)
            })
            debugger*/
        this.addressOptions = arr
      })
    },
    // 查询按钮
    async SearchOrderNo(){
      let res= await listOrder(this.orderFrom)
      this.OrderList=res.rows

    },
    //生成出库订单编号
    setOrderNo(){
      var date = new Date();
      var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }

      let round = Math.floor(Math.random() * (999 - 100)) + 100;
      var currentFormatDate = `${year}${month}${day}`;
      return "JS"+currentFormatDate+round;
    },
    //选中订单编号
    async checked(val){
      this.formData.orderNo=val
      this.orderListIsShow=false
      this.OrderList=[]
      let res=await listOrder(this.formData)//获取关租赁订单
      let res1=await getStatementListApi({orderNo:this.formData.orderNo})
      console.log(res1)
      console.log(res.rows[0].id)
      this.formData.contractTemplate=res.rows[0].contractTemplate
      this.formData.sponsor=res.rows[0].sponsor
      this.formData.sponsorName=res.rows[0].sponsorName
      this.formData.salesman=res.rows[0].salesman
      this.formData.salesmanName=res.rows[0].salesmanName
      this.formData.customerId=res.rows[0].customerId
      this.formData.customerName=res.rows[0].customerName
     this.formData.businessCompany= this.getValue(this.ProjectCompanyOptions,res.rows[0].businessCompany)
      this.formData.orderId=res.rows[0].id

      this.formData.projectArea=res.rows[0].projectArea
      this.formData.totalDailyRent=res.rows[0].totalDailyRent
      this.formData.rentReceivable=res.rows[0].totalRant
      this.formData.collaboratorName=res.rows[0].collaboratorName
      this.formData.collaborator=res.rows[0].collaborator

      this.formData.startDate=res1.rows[0].startDate
      this.formData.endDate=res1.rows[0].endDate
      this.formData.usedDays=res1.rows[0].usedDays
      this.formData.totalDailyRent=res1.rows[0].totalDailyRent
      this.formData.rentReceivable=res1.rows[0].rentReceivable
      this.formData.rentAllowanceAmount=res1.rows[0].rentAllowanceAmount
      this.formData.rentAllowanceDescription=res1.rows[0].rentAllowanceDescription
      this.formData.relationApprovalForm=res1.rows[0].relationApprovalForm
      this.formData.totalOtherExpenses=res1.rows[0].totalOtherExpenses
      this.formData.rentPaid=res1.rows[0].rentPaid
      this.formData.depositPaid=res1.rows[0].depositPaid
      this.formData.refundableDeposit=res1.rows[0].refundableDeposit
      this.formData.accountStatementAttachments=res1.rows[0].accountStatementAttachments
      this.formData.accountNumber=res1.rows[0].accountNumber
      this.formData.totalDeductibleExpenses=res1.rows[0].totalDeductibleExpenses
      this.formData.totalLogisticsExpenses=res1.rows[0].totalLogisticsExpenses
      this.formData.totalMaintenanceCost=res1.rows[0].totalMaintenanceCost
      this.formData.estimateProjectProfit=res1.rows[0].estimateProjectProfit
      this.formData.signRenId=res1.rows[0].signRenId
      this.formData.signRenName=res1.rows[0].signRenName
      this.formData.collaborator=res1.rows[0].collaborator
      this.formData.collaboratorName=res1.rows[0].collaboratorName
      this.formData.otherExpensesList=res1.rows[0].otherExpensesList
      this.formData.deductibleExpensesList=res1.rows[0].deductibleExpensesList
      this.formData.logisticsExpensesList=res1.rows[0].logisticsExpensesList
      this.formData.maintenanceCostList=res1.rows[0].maintenanceCostList


      let res2=await getMachineListExpenseApi({orderId:this.formData.orderId})
      console.log(res1)
      res1.rows.forEach((item, value) => {
        if (item.machine_id) {
          item.machineId = item.machine_id;
          delete item.machine_id;
        }
        if (item.machine_no) {
          item.machineNo = item.machine_no;
          delete item.machine_no;
        }

        if (item.product_id) {
          item.productId = item.product_id;
          delete item.product_id;
        }
        if (item.product_name) {
          item.productName =item.product_name;
          delete item.product_name;
        }
        if (item.product_no) {
          item.productNo = item.product_no;
          delete item.product_no;
        }

        if(item.all_time){
          item.allTime=item.all_time
          delete item.all_time
        }
        if(item.order_id){
          item.orderId=item.order_id
          delete item.order_id
        }

      });
      console.log(res2.rows)
      res2.rows.forEach(item=>{
        item.outtime=this.formatDate(item.outtime)
        item.retime=this.formatDate(item.retime)
        this.totalMachineExpense+=Number(item.rent)
      })

      this.machineExpenseList=res2.rows
    },
    // 获取项目信息来源
    getProjectSourceOptions() {
      getDicts('biz_project_source').then(response => {
        this.projectSourceOptions = response.data
      })
    },
    //  获取所属公司
    getProjectCompony(){
      getDicts('biz_business_company').then(respons=>{
        this.ProjectCompanyOptions=respons.data
      })
    },
    getValue(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (item === arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },
    //  修改
    async editFn(val){
      this.formData.id=val.id
      //  获取信息
      let res=await getFinalStatementInfoApi(val.id)
      this.formData=res.data
      this.isShow=true
    },
    async  btnOk(){
      // 表单验证
      try {
        await this.$refs.form.validate();
        if(this.formData.id){
          await editFinalStatementApi(this.formData)
          this.$message('修改成功')
        }else{
          await addFinalStatementApi(this.formData)
          this.$message('添加成功')
        }
        this.isShow=false
      } catch (error) {
        console.log(error);
      }


    },
    //删除
    async delFn(val){
      await this.$confirm("是否确认删除");
      await delFinalStatementApi(val)
      this.$message.success('删除成功')
      await this.getList()
    }

  }



}
</script>

